<style>
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding-left: 5px;
    }
</style>
<template>
    <span>
    <Drawer title="反馈详情" :closable="false" width="500" placement="right" v-model="drawerVisible">
        <Timeline>
            <TimelineItem >
                <p>反馈详情</p>
                <div >
                    <Row v-for="item in feedbackList">
                        <Col>
                            <p style="color: #ed3f14" v-if="item.type == 1" >{{item.userName}}：{{item.createTime}}</p>
                            <p style="color: #19be6b" v-if="item.type == 2" >平台：{{item.createTime}}</p>
                            <p style="padding-left: 25px;padding-right: 25px;">{{item.content}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <Icon type="ios-trash" size="24" style="float:right" @click="delSubmit(item)" :loading="submitLoading"/>
                                </p>
                        </Col>
                    </Row>
                </div>
                <br>
                <Form ref="feedbackForm" :model="feedbackForm" :label-width="80">
                        <Input v-model="feedbackForm.content" type="textarea" autocomplete="off"/>
                </Form>
                <br>
                <Button type="primary" @click="handelSubmit" :loading="submitLoading" >回复</Button>
            </TimelineItem>
        </Timeline>
    </Drawer>
    </span>
</template>
<script>
    import {feedbackDetail, add, delOne} from "@/api/feedback";

    export default {
        name: "detailDrawer",
        props: {
            userId: ""
        },
        data() {
            return {
                submitLoading: false,
                modalVisible: true,
                feedbackForm: {
                    userId:"",
                    content:"",
                    feedId: ""
                },
                feedbackList: [],
                drawerVisible:false,
            }
        },
        methods: {
            //加载数据
            showDrawer(params) {
                this.type = 1;
                this.drawerTitle = "详情";
                this.drawerVisible = true;
                this.feedbackForm.userId=params.userId;
                this.feedbackForm.content = "";
                this.feedbackForm.feedId = params.feedId;
                this.getData();
            },
            handelSubmit() {
                this.submitLoading = true;
                // 添加 避免编辑后传入id等数据 记得删除
                add(this.feedbackForm).then(res => {
                    this.submitLoading = false;
                    if (res.status === true) {
                        this.$Message.success("回复成功");
                        this.$parent.getDataList();
                        this.drawerVisible = false;
                    }
                });
            },
            delSubmit(params) {
                this.submitLoading = true;
                // 添加 避免编辑后传入id等数据 记得删除
                delOne(params.id).then(res => {
                    this.submitLoading = false;
                    if (res.status === true) {
                        this.$Message.success("删除成功");
                        this.getData();
                    }
                });
            },
            getData() {
                this.loading = true;
                feedbackDetail(this.feedbackForm.userId).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.feedbackList = res.data;
                    }
                });
            }

        }
    }
</script>